import React, { Component } from 'react';
import {
  View,
  Text,
  Image,
  StyleSheet,
  ScrollView,
  Platform,
} from 'react-native';
import PxToDp from '../../../utils/PxToDp';
import NavCon from '../../Public/NavCon';

class VehicleInfo extends Component {
  constructor(props) {
    super(props);

    this.state = {
    };
  }

  _goBack() {
    this.props.navigator.pop();
  }

  render() {
    const { carInfo } = this.props;
    const { car } = carInfo;
    return (
      <View style={[styles.flex, styles.bgColor, styles.titleTop]}>
        <NavCon currentTitle="车辆信息" onPress={() => this._goBack()} />
        <ScrollView contentContainerStyle={styles.scrollContainer}>
          <Image style={[styles.carImg]} source={require('../../../img/car_info.png')} />
          <Text style={[styles.name]}>{car && car.i1}</Text>
          <View style={[styles.priceWrapper]}>
            <Text style={[styles.price]}>{car && car.i2}</Text>
          </View>
          <View style={[styles.showArea]}>
            <View style={[styles.row, styles.list]}>
              <Text style={[styles.title]}>车身比例</Text>
              <Text style={[styles.value]}>{car && car.i7}</Text>
            </View>
            <View style={[styles.row, styles.list]}>
              <Text style={[styles.title]}>车主油耗</Text>
              <Text style={[styles.value]}>{car && car.i14}L/100KM</Text>
            </View>
            <View style={[styles.row, styles.list]}>
              <Text style={[styles.title]}>发动机</Text>
              <Text style={[styles.value]}>{car && car.i5}</Text>
            </View>
            <View style={[styles.row, styles.list]}>
              <Text style={[styles.title]}>驱动方式</Text>
              <Text style={[styles.value]}>{car && car.i66}</Text>
            </View>
            <View style={[styles.row, styles.list, { borderBottomWidth: 0 }]}>
              <Text style={[styles.title]}>变速器</Text>
              <Text style={[styles.value]}>{car && car.i63}</Text>
            </View>
          </View>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
  row: {
    flexDirection: 'row',
  },
  bgColor: {
    backgroundColor: '#fff',
  },
  scrollContainer: {
    alignItems: 'center',
  },
  carImg: {
    marginTop: PxToDp(20),
  },
  name: {
    marginTop: PxToDp(10),
    color: '#333',
    fontSize: PxToDp(16),
  },
  priceWrapper: {
    justifyContent: 'center',
    alignItems: 'center',
    width: PxToDp(90),
    height: PxToDp(27),
    marginTop: PxToDp(14),
    backgroundColor: 'rgba(254, 239, 239, .45)',
    borderColor: '#F13941',
    borderWidth: PxToDp(1),
    borderRadius: PxToDp(100),
  },
  price: {
    color: '#F13941',
    fontSize: PxToDp(14),
  },
  showArea: {
    width: '100%',
    height: PxToDp(250),
    marginTop: PxToDp(32),
    paddingLeft: PxToDp(20),
    borderColor: '#ddd',
    borderBottomWidth: PxToDp(1),
    borderTopWidth: PxToDp(1),
  },
  list: {
    justifyContent: 'space-between',
    alignItems: 'center',
    width: PxToDp(355),
    height: PxToDp(50),
    paddingRight: PxToDp(26),
    borderColor: '#f3f3f3',
    borderBottomWidth: PxToDp(1),
  },
  title: {
    color: '#999',
    fontSize: PxToDp(16),
    textAlign: 'left',
  },
  value: {
    color: '#333',
    fontSize: PxToDp(16),
    textAlign: 'right',
  },
  titleTop: {
    marginTop: Platform.OS === 'ios' ? 20 : 0,
  },
});

export default VehicleInfo;
